<template>
	<view>
		<kui-page :custom-header="false">
			<template v-slot:body>
				<view class="kui-w-full kui-h-full">
					<view class="kui-my-3 kui-flex">
						<kui-text>暗黑模式：</kui-text>
						<kui-switch v-model="state.modeChecked" @change="changeMode"></kui-switch>
					</view>
					<kui-space :gap="[30,0]" direction="column">
						<kui-cell-group title="基本用法">
							<kui-cell title="基本用法" @click="baseState.methods.onClick">
								<template v-slot:right-icon>
									<kui-text>{{ baseState.state.val }}</kui-text>
								</template>
							</kui-cell>
							<kui-cell title="展示取消按钮" @click="cancelState.methods.onClick">
								<template v-slot:right-icon>
									<kui-text>{{ cancelState.state.val }}</kui-text>
								</template>
							</kui-cell>
							<kui-cell title="展示标题和描述" @click="descState.methods.onClick">
								<template v-slot:right-icon>
									<kui-text>{{ descState.state.val }}</kui-text>
								</template>
							</kui-cell>
						</kui-cell-group>
						<kui-cell-group title="选项状态">
							<kui-cell title="不同选项状态" @click="statusState.methods.onClick">
								<template v-slot:right-icon>
									<kui-text>{{ statusState.state.val }}</kui-text>
								</template>
							</kui-cell>
						</kui-cell-group>
					</kui-space>
				</view>
			</template>
		</kui-page>
		<kui-actionsheet v-model:show="baseState.state.show" :actions="baseState.state.actions" @choose="baseState.methods.onChoose"></kui-actionsheet>
		<kui-actionsheet v-model:show="cancelState.state.show" :actions="cancelState.state.actions" :cancelText="cancelState.state.cancelText" @choose="cancelState.methods.onChoose"></kui-actionsheet>
		<kui-actionsheet v-model:show="descState.state.show" :actions="descState.state.actions" :description="descState.state.description" :title="descState.state.title" @choose="descState.methods.onChoose"></kui-actionsheet>
		<kui-actionsheet v-model:show="statusState.state.show" :choose-item-value="statusState.state.chooseItemValue" :actions="statusState.state.actions" @choose="statusState.methods.onChoose"></kui-actionsheet>
	</view>
</template>

<script lang="ts">
	import {
		reactive
	} from 'vue';
	
	export default {
		setup() {
			const baseState = {
				state: reactive({
					show: false,
					actions: [{
						name: '选项一'
					}, {
						name: '选项二'
					}, {
						name: '选项三'
					}],
					val: ''
				}),
				methods: {
					onClick() {
						baseState.state.show = true;
					},
					onChoose(item) {
						baseState.state.val = item.name;
					}
				}
			};
			
			const cancelState = {
				state: reactive({
					...baseState.state,
					cancelText: '取消'
				}),
				methods: {
					onClick() {
						cancelState.state.show = true;
					},
					onChoose(item) {
						cancelState.state.val = item.name;
					}
				}
			};
			
			const descState = {
				state: reactive({
					show: false,
					actions: [{
						name: '选项一',
					}, {
						name: '选项二',
						description: '这是描述信息',
						color: '#00BC79'
					}, {
						name: '选项三'
					}],
					title: '这是标题',
					description: '这是描述信息',
					val: ''
				}),
				methods: {
					onClick() {
						descState.state.show = true;
					},
					onChoose(item) {
						descState.state.val = item.name;
					}
				}
			};
			
			const statusState = {
				state: reactive({
					show: false,
					actions: [{
						name: '选中选项'
					}, {
						name: '加载选项',
						loading: true
					}, {
						name: '禁用选项',
						disable: true
					}],
					chooseItemValue: '选中选项',
					val: ''
				}),
				methods: {
					onClick() {
						statusState.state.show = true;
					},
					onChoose(item) {
						statusState.state.val = item.name;
					}
				}
			};
			
			const state = reactive({
				mode: 'light',
				modeChecked: false
			});
			
			const changeMode = () => {
				state.mode = state.mode == "light" ? "dark" : "light";
				// provide("changeMode", data.mode);
				uni.$emit("changeMode", state.mode);
			};
			
			return {
				baseState,
				state,
				cancelState,
				descState,
				statusState,
				changeMode
			}
		}
	}
</script>

<style>

</style>
